<template>
  <div style="height: 100%">
    <ElDivider>页面布局</ElDivider>
    <ElMenu :default-active="activeMenu" @select="handleSelect">
      <ElMenuItem v-for="(item, index) in pageList" :key="index" :index="getIndex(item.id)">
        <div style="width: 100%; display: flex; justify-content: space-between; line-height: 18px">
          <div>
            <Icon icon="table" v-if="item.layout === 'tableLayout'"></Icon>
            <Icon icon="dialog" v-else-if="item.layout === 'dialogLayout'"></Icon>
            <Icon icon="flow-form" v-else-if="item.layout === 'flowFormLayout'"></Icon>
            <Icon icon="online-form" v-else-if="item.layout === 'reportFormLayout'"></Icon>
            <span style="margin-left: 10px; font-weight: bold">{{ item.pageName }}</span>
          </div>
          <div>
            <ElButton type="primary" link @click.stop="handleEditPage(item, index)"><Icon icon="edit"></Icon></ElButton>
            <ElPopconfirm title="是否确认删除？" @confirm="handleRemovePage(index)">
              <template #reference>
                <ElButton type="danger" link @click.stop><Icon icon="delete"></Icon></ElButton>
              </template>
            </ElPopconfirm>
          </div>
        </div>
      </ElMenuItem>
    </ElMenu>
    <ElMenu>
      <ElMenuItem index="0" @click="handleAddPage">
        <Icon icon="plus" color="#8c8c8c"></Icon>
        <span style="color: #8c8c8c; margin-left: 10px; font-weight: bold">新增页面</span>
      </ElMenuItem>
    </ElMenu>
    <Dialog ref="dialogRef" :title="title" @submit="handleSubmit">
      <Form ref="formRef" :schemas="schemas" label-width="80px"> </Form>
    </Dialog>
  </div>
</template>

<script setup lang="tsx" name="PagePanel">
import { computed, ref, watch } from "vue";
import { ElDivider, ElMenu, ElMenuItem, ElButton, ElPopconfirm } from "element-plus";
import { Dialog, useDialog } from "@/components/Dialog";
import { Form, Select, useForm } from "@/components/Form";
import { Icon } from "@/components/Icon";
import { SchemaProps } from "@/components/Form/type";
import { createDesigner } from "@/components/Micro/util/design";
import { deepClone } from "@/components/Micro/util/common";
import pageApi from "@/views/micro/page/api";
import entityApi from "@/views/micro/entity/api";
const props = defineProps({
  designer: {
    type: Object
  }
});
const title = ref();
const dialogRef = ref();
const formRef = ref();
const once = ref(true);
const dialog = useDialog(dialogRef);
const form = useForm(formRef);
const activeMenu = ref();
const getIndex = index => String(index);
const handleSelect = index => {
  if (activeMenu.value != index) {
    activeMenu.value = index;
    for (const page of pageList.value) {
      if (String(page.id) === index) {
        const pageJson = page["pageJson"];
        props.designer!.widget = pageJson;
        break;
      }
    }
  }
};
const appId = computed(() => props.designer!.global.appId);
const pageList = computed(() => props.designer!.global.pageList);
const handleAddPage = async () => {
  title.value = "新增页面布局";
  await dialog.open(null);
  await form.resetFields();
};
const handleEditPage = async (row, index) => {
  title.value = "编辑页面布局";
  await dialog.open(index);
  await form.updateFields(row);
};
const handleRemovePage = index => {
  pageList.value.splice(index, 1);
};
const handleSubmit = async index => {
  const fields = await form.validateFields();
  const fieldList = await entityApi.listField({ id: props.designer!.global.entityId });
  if (index != null) {
    pageList.value[index].pageName = fields.pageName;
    pageList.value[index].orderNum = fields.orderNum;
  } else {
    const res = deepClone(fields);
    res.appId = appId.value;
    const pageJson = createDesigner(fields, fieldList);
    res.pageJson = JSON.stringify(pageJson);
    const id = await pageApi.add(res);
    res.id = id;
    res.pageJson = pageJson;
    pageList.value.push(res);
    handleSelect(String(id));
  }
  pageList.value.sort((a, b) => a.orderNum - b.orderNum);
  dialog.close();
};
watch(
  () => pageList.value,
  value => {
    if (once.value && value && value.length > 0) {
      handleSelect(String(value[0].id));
      once.value = false;
    }
  },
  {
    immediate: true
  }
);
const schemas: SchemaProps[] = [
  {
    field: "pageName",
    label: "页面名称",
    required: true
  },
  {
    field: "layout",
    label: "页面布局",
    required: true,
    el: "select",
    render: (formModel, schema) => {
      const options = [
        { label: "查询表格", value: "tableLayout", icon: "table" },
        { label: "编辑表单", value: "dialogLayout", icon: "dialog" },
        { label: "流程表单", value: "flowFormLayout", icon: "flow-form" },
        { label: "填报表单", value: "reportFormLayout", icon: "online-form" }
      ];
      return (
        <Select v-model={formModel[schema.field]} disabled={!!formModel.id} options={options} style="width: 100%">
          {{
            default: ({ item }) => {
              return (
                <ElButton link>
                  {{
                    icon: () => <Icon icon={item.icon}></Icon>,
                    default: () => <span>{item.label}</span>
                  }}
                </ElButton>
              );
            }
          }}
        </Select>
      );
    },
    defaultValue: "tableLayout"
  },
  {
    field: "orderNum",
    label: "显示顺序",
    el: "number",
    elProps: {
      controlsPosition: "right",
      precision: 0,
      style: {
        width: "100%"
      },
      min: 1
    },
    defaultValue: 1,
    required: true
  }
];
defineExpose({ handleSelect });
</script>

<style scoped lang="scss">
.tree-node {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
</style>
